<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Title</title>
  <script src="../js/vue-3.2.26.js"></script>
</head>
<body>
<div id="app">
  <!-- 遍历数组 -->
  <ul>
    <!-- 只获取值 -->
    <li v-for="item in list" :key="item">{{item}}</li>
  </ul>
  <hr>
  <ul>
    <!-- 获取值和下标 -->
    <li v-for="(item, index) in list">{{index+1}}.{{item}}</li>
  </ul>
  <hr>
  <!-- 遍历对象 -->
  <ul>
    <!-- 只获取值 -->
    <li v-for="item in obj">{{item}}</li>
  </ul>
  <hr>
  <ul>
    <!-- 获取值和属性名 -->
    <li v-for="(item, key) in obj">{{key}}.{{item}}</li>
  </ul>
  <hr>
  <ul>
    <!-- 获取值、属性名和下标 -->
    <li v-for="(item, key, index) in obj">{{index+1}}.{{key}}.{{item}}</li>
  </ul>
  <hr>
  <!-- :key优化 -->
  <ul>
    <!-- 使用v-for时，最好带上:key，如下所示 -->
    <!-- 当在li2下方插入e时(splice(2,0,'e'))，普通写法会改变3个标签 -->
    <!-- li1--a   a -->
    <!-- li2--b   b -->
    <!-- li3--c   e (复制c到li4，插入e)-->
    <!-- li4--d   c (复制d到li5，插入c)-->
    <!-- li5      d (新增标签li5)-->
    <!-- 使用:key后，只会改变1个标签 -->
    <!-- li1--a   a -->
    <!-- li2--b   b -->
    <!-- li5      e (新增标签li5，插入e)-->
    <!-- li3--c   c -->
    <!-- li4--d   d -->
    <!-- :key的值需要是固定的值，如item不会变可以使用，index会变不可使用 -->
    <!-- item的值最好是唯一值 -->
    <li v-for="item in list" :key="item">{{item}}</li>
  </ul>
  <hr>
  <ul>
    <li v-for="item in list2">{{item}}</li>
  </ul>
  <!-- push/unshift/pop/shift/splice/sort/reverse可以使界面刷新，赋值替换元素不可以 -->
  <div>
    <!-- 添加元素到尾部 -->
    <button @click="list2.push('e')">push尾部添加1个</button>
    <!-- 可以添加多个 -->
    <button @click="list2.push('e','f','g')">push尾部添加多个</button>
    <!-- 添加元素到首部 -->
    <button @click="list2.unshift('e')">unshift首部添加1个</button>
    <!-- 可以添加多个 -->
    <button @click="list2.unshift('e','f','g')">unshift首部添加多个</button>
    <br>
    <!-- 删除最后一个元素 -->
    <button @click="list2.pop()">pop删除尾部</button>
    <!-- 删除第一个元素 -->
    <button @click="list2.shift()">shift删除首部</button>
    <br>
    <!-- splice(开始删除的下标，删除的个数，插入的值) -->
    <button @click="list2.splice(2)">splice从2号删除到尾部</button>
    <button @click="list2.splice(2,1)">splice从2号删除1个</button>
    <br>
    <button @click="list2.splice(2,1,'a')">splice从2号删除1个，插入a(替换1个)</button>
    <button @click="list2.splice(2,2,'a','b')">splice从2号删除2个，插入a，b(替换多个)</button>
    <button @click="list2.splice(2,1,'a','b')">splice从2号删除1个，插入a，b</button>
    <br>
    <button @click="list2.splice(2,0,'a')">splice从2号插入a</button>
    <button @click="list2.splice(2,0,'a','b')">splice从2号插入a，b</button>
    <br>
    <!-- 排序 -->
    <button @click="list2.sort()">sort排序</button>
    <!-- 反转 -->
    <button @click="list2.reverse()">reverse反转</button>
    <br>
    <!-- 赋值替换元素 -->
    <button @click="replace">赋值替换元素</button>
  </div>
</div>
</body>
<script>
  const App = {
    data() {
      return {
        list: ['a', 'b', 'c'],
        list2: ['a', 'b', 'c', 'd'],
        obj: {
          aa: 'a1',
          bb: 'b2',
          cc: 'c3',
        },
      }
    },
    methods: {
      replace() {
        this.list2[2] = '嘿嘿';
        console.log(this.list2);
      }
    },
  }
  const app = Vue.createApp(App).mount("#app");
</script>
</html>
